<template>
    <div class="container">
      <h1>电影排名查询</h1>
      <form @submit.prevent="fetchMovieData">
        <div class="form-group">
          <label for="rank">输入排名:</label>
          <input
            type="number"
            class="form-control"
            id="rank"
            v-model="rank"
            required
          />
        </div>
        <button type="submit" class="btn btn-primary">查询</button>
      </form>
  
      <!-- 显示电影信息 -->
      <div v-if="movie" class="mt-4">
        <h2>{{ movie.MOVIE_NAME }}</h2>
        <p><strong>排名:</strong> {{ rank }}</p>
        <!-- 其他电影信息可以根据 API 返回的数据动态显示 -->
      </div>
  
      <!-- 显示提示信息 -->
      <div v-if="message" class="mt-4 alert" :class="messageClass">
        {{ message }}
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        rank: '', // 用户输入的排名
        movie: null, // 电影信息
        message: '', // 提示信息
        messageClass: '', // 提示信息的样式类
      };
    },
    methods: {
      async fetchMovieData() {
        try {
          const response = await axios.get('http://127.0.0.1:8000/api/rank', {
            params: {
              n: this.rank, // 将排名作为查询参数
            },
          });
  
          // 检查 API 响应
          if (response.data.code === 0) {
            if (response.data.data.length > 0) {
              // 如果 data 不为空，提取电影信息
              this.movie = response.data.data[0];
              this.message = '';
            } else {
              // 如果 data 为空，提示未找到电影
              this.movie = null;
              this.message = '未找到该排名的电影。';
              this.messageClass = 'alert-warning';
            }
          } else {
            // 如果 code 不为 0，提示获取失败
            this.movie = null;
            this.message = response.data.msg || '获取电影数据失败，请稍后重试。';
            this.messageClass = 'alert-danger';
          }
        } catch (err) {
          // 捕获请求错误
          this.movie = null;
          this.message = '请求失败，请检查网络连接或稍后重试。';
          this.messageClass = 'alert-danger';
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .alert {
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
  }
  
  .alert-warning {
    background-color: #fff3cd;
    color: #856404;
  }
  
  .alert-danger {
    background-color: #f8d7da;
    color: #721c24;
  }
  </style>